<template>
  <div class="we-warp">
    <PageTopCover
      :style="{ height: isMobi ? '400px!important' : '500px' }"
      :moduleTitle="''"
      :textIcon="''"
      :coverImg="getOnlineImgUrl('/imgs/cover/cover_like.png')"
      :isMobile="isMobi"
      :mudulDesc="''"
      :isArticle="false"
      :bgColor="''"
      :moduleBgColor="''"></PageTopCover>
    <div class="top-warp" v-show="true" :style="{ padding: isMobi ? '20px' : '20px 40px', top: isMobi ? '160px' : '180px' }">
      <div class="avatar-warp">
        <div class="avatar" :style="{ height: isMobi ? '80px' : '140px', width: isMobi ? '80px' : '140px' }">
          <img style="height: 100%; width: 100%; object-fit: cover" :src="getOnlineImgUrl('/imgs/common/nantou.jpg')" alt="" />
        </div>
        <div :style="{ fontSize: isMobi ? '20px' : '25px' }" class="name">雪王</div>
      </div>
      <img class="taoxin" :style="{ height: isMobi ? '60px' : '100px', width: isMobi ? '80px' : '160px' }" src="@/assets/images/common/like.svg" />
      <div class="avatar-warp">
        <div class="avatar" :style="{ height: isMobi ? '80px' : '140px', width: isMobi ? '80px' : '140px' }">
          <img style="height: 100%; width: 100%; object-fit: cover" :src="getOnlineImgUrl('/imgs/common/nvtou.jpg')" alt="" />
        </div>
        <div :style="{ fontSize: isMobi ? '20px' : '25px' }" class="name">阿桔</div>
      </div>
    </div>
    <div class="content-warp-out" :class="{ 'm-content-warp-out': isMobi }">
      <!-- <div class="bottom-bg"></div>
      <div class="bottom-bg1"></div> -->
      <div class="content-warp-padding">
        <div class="center-warp">
          <div class="timer-envelope-warp">
            <div class="love-content">
              <div class="love-time-title1">这是我们一起走过的</div>
              <div class="love-time1">
                第
                <span class="love-time1-item love-time1-item-year">{{ state.year }}</span>
                年
                <span class="love-time1-item">{{ state.month }}</span>
                月
                <span class="love-time1-item">{{ state.day }}</span>
                日
                <span class="love-time1-item">{{ state.hour }}</span>
                时
                <span class="love-time1-item">{{ state.minute }}</span>
                分
                <span class="love-time1-item">{{ state.second }}</span>
                秒
              </div>
            </div>
            <div class="envelope-warp pointer" @click="handleEnvelope">
              <div class="title">飞车传信</div>
              <span class="family-button-car">
                <IconFlyCar />
              </span>
            </div>
          </div>

          <div class="img-warp">
            <div class="category-warp">
              <div
                class="category-item pointer hover-shadow"
                :class="{ 'active-category': state.currentCategoryIndex === index }"
                :style="{ backgroundColor: item.color }"
                v-for="(item, index) in category"
                :key="item.name"
                @click="changeCategory(index)">
                {{ item.name }} {{ item.num }}
              </div>
            </div>
            <div class="current-categroy">{{ category[state.currentCategoryIndex].name }}</div>
            <div class="imgs-hav" v-if="state.imgs.length">
              <div class="imgs-inner-warp">
                <div class="imgs-item hover-shadow intersection-observer" v-for="(item, index) in state.imgs" :key="index">
                  <LImg class="img" :src="item.src" />
                  <div class="remark">{{ item.remark }}</div>
                </div>
              </div>
            </div>
            <div class="no-msg" v-else>
              <Empty :text="'暂无图片~'" :loadingText="'图片资源加载中...'" :loading="state.loading"></Empty>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useIntersectionObserver from '@/hooks/useIntersectionObserver';
import useResize from '@/hooks/useResize';
import { getOnlineImgUrl } from '@/utils/common';
import { getRandomColor } from '@/utils/theme';
import moment from 'moment';
import { onMounted, onUnmounted, reactive } from 'vue';
import { useRouter } from 'vue-router';

const { isMobi } = useResize();
const router = useRouter();

useIntersectionObserver();

const state = reactive({
  year: 0,
  day: 0,
  month: 0,
  hour: 0,
  minute: 0,
  second: 0,
  timer: null,

  loading: false,
  imgs: [],
  currentCategoryIndex: 0
});

const category = [
  { color: getRandomColor(), name: '老君山', num: 0 },
  { color: getRandomColor(), name: '西湖', num: 0 },
  { color: getRandomColor(), name: '洪崖洞', num: 0 }
];
const imgs = [];
const startTime = '2022-01-01 00:00:00';
const computedTime = () => {
  const now = moment();
  const start = moment(startTime);
  const diff = now.diff(start, 'days');
  const year = Math.floor(diff / 365);
  const month = Math.floor((diff % 365) / 30);
  const day = Math.floor((diff % 365) % 30);
  const hour = now.hour();
  const minute = now.minute();
  const second = now.second();
  state.year = year;
  state.month = month;
  state.day = day;
  state.hour = hour;
  state.minute = minute;
  state.second = second;
};
computedTime();

const getListFn = () => {
  state.loading = true;
  state.imgs = [];
  setTimeout(() => {
    state.imgs = imgs;
    state.loading = false;
  }, 500);
};

getListFn();

const changeCategory = index => {
  state.currentCategoryIndex = index;
  getListFn();
};

const handleEnvelope = () => {
  router.push('/about/like/envelope');
};

onMounted(() => {
  if (state.timer) clearInterval(state.timer);
  state.timer = setInterval(() => {
    computedTime();
  }, 1000);
});

onUnmounted(() => {
  clearInterval(state.timer);
});
</script>

<style lang="scss" scoped>
.we-warp {
  width: 100%;
  height: 100%;
  position: relative;
  .top-warp {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    backdrop-filter: blur(4px);
    background: hsla(0, 0%, 100%, 0.1);
    max-width: 950px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 50px;
    border: 1px solid var(--border-color);
    .avatar-warp {
      display: flex;
      flex-direction: column;
      align-items: center;
      .avatar {
        border: 4px solid hsla(0, 0%, 100%, 0.2);
        border-radius: 50%;
        overflow: hidden;
      }
      .name {
        line-height: 30px;
        font-weight: bold;
        margin-top: 10px;
        color: #fff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
      }
    }
    .taoxin {
      animation: shan 2s linear infinite;
    }
  }
  .content-warp-out {
    min-height: calc(100vh - 500px);
    padding: 20px 0 0 0;
    position: relative;
    .bottom-bg {
      height: 50px;
      position: absolute;
      top: -50px;
      width: 400%;
      left: -236px;
      z-index: 4;
      transition-duration: 0.4s, 0.4s;
      animation: move2 20s linear infinite;
      background-image: url('@/assets/images/common/wave1.png');
      // transform: rotateX(180deg);
    }
    .bottom-bg1 {
      position: absolute;
      height: 65px;
      width: 400%;
      left: 0;
      top: -65px;
      z-index: 3;
      opacity: 1;
      // transform: rotateX(180deg);
      transition-duration: 0.4s, 0.4s;
      animation: move2 40s linear infinite;
      background-image: url('@/assets/images/common/wave2.png');
    }
    .content-warp-padding {
      min-height: calc(100vh - 520px);
      background-image: linear-gradient(90deg, rgba(37, 82, 110, 0.1) 1px, transparent 0);
      background-size: 3rem 3rem;
      .center-warp {
        min-height: calc(100vh - 520px);
        max-width: var(--content-max-width);
        margin: 0 auto;
        padding-bottom: 20px;

        .timer-envelope-warp {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .love-content {
            padding: 30px 0;
            .love-time-title1 {
              padding: 10px 20px;
              font-size: 2rem;
              font-weight: 600;
              letter-spacing: 0.2rem;
              line-height: 4rem;
              text-align: center;
              background-image: linear-gradient(270deg, #ff4500, orange, gold, #90ee90, #0ff, #1e90ff, #9370db, #ff69b4, #ff4500);
              -webkit-background-clip: text;
              animation: jianBian 60s linear infinite;
              color: transparent;
            }
            .love-time1 {
              margin-top: 20px;
              display: flex;
              justify-content: center;
              align-items: flex-end;
              font-size: 2rem;
              color: #000;
              .love-time1-item {
                font-size: 4rem;
                font-weight: 700;
                text-align: center;
                margin: 0 10px;
                display: inline-block;
                width: 60px;
              }
              .love-time1-item-year {
                min-width: 60px;
                width: auto;
              }
            }
          }
          .envelope-warp {
            margin-bottom: 30px;
            width: 360px;
            height: 150px;
            background-image: url('https://raw.gitcode.com/snows_l/assets/raw/main/imgs/cover/love.jpg');
            background-size: cover;
            border-radius: var(--border-radius-3);
            display: flex;
            align-items: center;
            justify-content: left;
            padding: 20px;
            .title {
              font-size: 30px;
              font-weight: 600;
              color: #fff;
            }
            .family-button-car {
              position: absolute;
              margin-left: 200px;
              margin-top: 40px;
              animation: passing 4s linear infinite;
            }
          }
        }
        .img-warp {
          margin-top: 60px;
          .category-warp {
            padding: 0 20px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .category-item {
              padding: 10px 20px;
              color: #fff;
              border: 1px solid #eee;
              border-radius: var(--border-radius-2);
              text-wrap: nowrap;
              margin: 5px 14px 5px 0;
            }
            .active-category {
              animation: scale 2.5s ease-in-out infinite;
            }
          }
          .current-categroy {
            padding: 20px 20px 30px 20px;
            font-size: 30px;
            text-align: center;
          }
          .imgs-inner-warp {
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            .imgs-item {
              width: 270px;
              margin: 10px 18px;
              border: 1px solid var(--border-color);
              border-radius: var(--border-radius-2);
              box-shadow: 0.125rem 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
              overflow: hidden;
              .img {
                width: 270px;
                height: 200px;
                border: 0;
              }
              .remark {
                background-color: var(--bg-content-color);
                height: 48px;
                line-height: 20px;
                width: 100%;
                font-size: 16px;
                padding: 4px 10px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: left;
              }
            }
          }
        }
      }
    }
  }
  .m-content-warp-out {
    min-height: calc(100vh - 400px) !important;
    .content-warp-padding {
      min-height: calc(100vh - 420px) !important;
      .love-content {
        .love-time1 {
          margin-top: 0 !important;
          font-size: 18px !important;
          .love-time1-item,
          .love-time1-item-year {
            font-size: 26px !important;
            margin: 0 5px !important;
            display: inline !important;
            width: auto !important;
            min-width: auto !important;
          }
        }
      }
      .imgs-item {
        width: 100% !important;
        height: 100% !important;
        .img {
          width: 100% !important;
          height: 45vw !important;
        }
      }
    }
  }
}

@keyframes shan {
  0% {
    transform: scale(0.8);
  }
  70% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(0.8);
  }
}

@keyframes jianBian {
  100% {
    background-position: -2000rem;
  }
}

@keyframes passing {
  0% {
    transform: translateX(-130%);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
// 背景动画
@keyframes move2 {
  100% {
    background-position: -100% 0;
  }
}
</style>
